@import "./iconfont.scss";
@import "./mixins.scss";

html {
    font-size: 13.33334vw;
}

.app-container {
    .hd {
        z-index: 99;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 0.88rem;
        line-height: 0.88rem;
        padding: 0 0.2rem;
        background: #fff;
        @include flex-ui;
        @include space-between;

        // 调用混合指令themify() ,定义规则,此处的规则会替换@content
        @include themify() {
            color: themed("fontColor");
            border: themed("borderColor");
            font-size: themed("fontSize");
        }
    }

    .content {
        padding: 0.88rem 0 1.5rem;

        .banner {
            width: 100%;
            height: 30vh;
            opacity: 0.5;
            margin: 0.2rem 0;

            @include themify() {
                background: themed("bgColor");
            }
        }

        .nav-box {
            width: 100vw;
            @include flex-ui;
            @include flex-wrap;

            @include themify() {
                border-top: themed("borderColor");
                border-right: themed("borderColor");
            }

            .item {
                width: 33.33%;
                padding: 0.2rem 0;
                @include flex-ui;
                @include flex-direction-column;
                @include flex-wrap;
                @include center;
                @include align-center;

                @include themify() {
                    color: themed("fontColor");
                    border-left: themed("borderColor");
                    border-bottom: themed("borderColor");
                    font-size: themed("fontSize");
                }

                span {
                    margin-top: 0.1rem;
                }
            }
        }

        .sel-box {
            width: 100%;
            margin: 0.3rem 0;
            @include flex-ui;
            @include center;

            select {
                height: 0.88rem;
                line-height: 0.88rem;
                padding-left: 0.2rem;

                @include themify() {
                    color: themed("fontColor");
                    border: themed("borderColor");
                    font-size: themed("fontSize");
                }
            }
        }

        [class*="icon-"] {
            @include themify() {
                font-size: themed("fontSize") * 1.5;
            }
        }
    }

    .ft {
        z-index: 99;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0.2rem 0;
        background-color: #fff;
        @include flex-ui;
        @include align-center;

        @include themify() {
            color: themed("fontColor");
            border: themed("borderColor");
            font-size: themed("fontSize");
        }

        .flex {
            @include flex-ui;
            @include flex;
            @include flex-direction-column;
            text-align: center;

            i {
                display: block;
                width: 0.4rem;
                height: 0.4rem;
                margin: 0 auto 0.06rem;

                @include themify() {
                    font-size: themed("fontSize") * 1.4;
                }
            }
        }
    }
}